<template>
  <div class="home">
    <TopView />
    <SalesView />
    <BottomView />
    <MapView />
  </div>
</template>

<script>
import TopView from '../components/TopView'
import SalesView from '../components/SalesView'
import BottomView from '../components/BottomView'
import MapView from '../components/MapView'
import { wordcloud, screenData, mapScatter } from '../api'

export default {
  name: 'Home',
  components: { TopView, SalesView, BottomView, MapView },
  data(){
    return {
      reportData:null,
      wordCloud:null,
      mapData:null
    }
  },
  provide(){
    return {
      getReportData:this.getReportData,
      getWordCloud:this.getWordCloud,
      getMapData:this.getMapData
    }
  },
  methods:{
    getReportData () {
      return this.reportData
    },
    getWordCloud(){
      return this.wordCloud
    },
    getMapData(){
      return this.mapData
    },

  },

  mounted () {
    screenData()
      .then(data => { this.reportData=data })
      .catch(err => { alert(err.message)})
    wordcloud()
      .then(data => { this.wordCloud=data })
      .catch(err => { alert(err.message)})
    mapScatter()
      .then(data => { this.mapData=data })
      .catch(err => { alert(err.message)})
  }
}
</script>

<style scoped >
.home{
  width:100% ;
  box-sizing: border-box;
  padding: 0 20px 20px;
  background:#eee ;
}
</style>
